<template>
    <div class="lianxi">
        <header>
        	<span class="tuijian-left"><img v-bind:src="imgfanhui"></span>
        	<span class="tuijian-center"><input type="text" name="" placeholder="点击搜素"></span>
        	<span class="tuijian-right"></span>
        </header>
        <aside>
        	<ul>
	        	<li  v-for="(tab,index) in tabs" @click="tabIndex = index"
	        		:class="{active:tabIndex == index}">{{tab.text}}</li>
	        </ul>
	        	<div  class="tuijian-one"  v-show="tabIndex == 0">
	        		<div class="tuijianbuju">
	        			<ul>
	        				<li>
	        					<img v-bind:src="iimage">
	        					<a href="#">{{message}}</a>
	        				</li>
	        				<li>
	        					<img v-bind:src="iimage">
	        					<a href="#">{{message}}</a>
	        				</li>
	        				<li>
	        					<img v-bind:src="iimage">
	        					<a href="#">{{message}}</a>
	        				</li>
	        			</ul>
	        				        			<ul>
	        				<li>
	        					<img v-bind:src="iimage">
	        					<a href="#">{{message}}</a>
	        				</li>
	        				<li>
	        					<img v-bind:src="iimage">
	        					<a href="#">{{message}}</a>
	        				</li>
	        				<li>
	        					<img v-bind:src="iimage">
	        					<a href="#">{{message}}</a>
	        				</li>
	        			</ul>
	        			
	        		</div>
	        	</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 1">11</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 2">2</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 3">4</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 4">22222</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 5">123123</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 6">43534</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 7">22</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 8">11</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 9">2</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 10">4</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 11">22222</div>
	        	<div  class="tuijian-one"  v-show="tabIndex == 12">123123</div>
        </aside>
    </div>
</template>

<script>
export default {
  name: 'lianxi',
  data () {
    return {
    	imgfanhui:"../../static/tuijianfanhui.png",
    	message:"吃货",
    	iimage:"../../static/miximixi.png",
    	tabIndex:0,
    	tabs:[
    		{text:"推荐"},
    		{text:"美妆"},
    		{text:"个户"},
    		{text:"食品"},
    		{text:"生活"},
    		{text:"数码"},
    		{text:"办公"},
    		{text:"鞋包"},
    		{text:"家电"},
    		{text:"运动"},
    		{text:"图书"},
    		{text:"搭配"},
    	]
    }
  }
}
</script>


<style scoped lang="less">
 @import url(../assets/less/tuijian.less);
</style>
